import React, { useState, useRef, useEffect } from "react";

import { Form, DatePicker, Select, Button, message } from "antd";
import { useForm } from "antd/es/form/Form";
import "./statistics.css";

import * as echarts from "echarts";
import dayjs from "dayjs";

import { meetingRoomUsedCount, userBookingCount } from "../../api/statistic";

/* 一些可以不写在函数式组件内的变量和方法 */
interface SearchParams {
    startTime: string;
    endTime: string
}
interface UserBookingData {
    userId: string;
    username: string;
    bookingCount: string;
}
interface MeetingRoomUsedData {
    meetingRoomName: string;
    meetingRoomId: number;
    usedCount: string;
}

export const Statistics: React.FC = ()=> {
    /* state变量书写区 */ 
    const [userBookingData, setUserBookingData] = useState<Array<UserBookingData>>();
    const [meetingRoomUsedData, setMeetingRoomUsedData] = useState<Array<MeetingRoomUsedData>>();
    /* 非state变量书写区 */ 
    const chartRef = useRef<HTMLDivElement>(null);
    const chartRef2 = useRef<HTMLDivElement>(null);
    const [form] = useForm();
    /* 方法书写区 */ 
    const getStatisticData = async (values: SearchParams)=>{
        const startTime = dayjs(values.startTime).format("YYYY-MM-DD");
        const endTime = dayjs(values.endTime).format("YYYY-MM-DD");

        const {data, status} = await userBookingCount(startTime, endTime);
        if(status === 201 || status === 200) {
            setUserBookingData(data);
        }else {
            message.error("系统繁忙，请稍后重试");
        }

        const res = await meetingRoomUsedCount(startTime, endTime);
        if(res.status === 201 || res.status === 200) {
            setMeetingRoomUsedData(res.data);
        }else {
            message.error("系统繁忙，请稍后重试");
        }
    }
    /* 生命周期书写区 */ 
    useEffect(()=>{
        const myChart = echarts.init(chartRef.current);
        if(!userBookingData) return;
        myChart.setOption({
            title: {
                text: '用户预定情况'
            },
            tooltip: {},
            xAxis: {
                data: userBookingData?.map(item=>item.username)
            },
            yAxis: {},
            series: [
                {
                    name: '预定次数',
                    type: form.getFieldValue("chartType"),
                    data: userBookingData?.map(item =>({name: item.username, value: item.bookingCount}))
                }
            ]
        })
    }, [userBookingData])

    useEffect(()=>{
        const myChart = echarts.init(chartRef2.current);
        if(!meetingRoomUsedData) return;
        myChart.setOption({
            title: {
                text: '会议室使用情况'
            },
            tooltip: {},
            xAxis: {
                data: meetingRoomUsedData?.map(item => item.meetingRoomName)
            },
            yAxis: {},
            series: [
                {
                    name: '使用次数',
                    type: form.getFieldValue('chartType'),
                    data: meetingRoomUsedData?.map(item => {
                        return {
                            name: item.meetingRoomName,
                            value: item.usedCount
                        }
                    })
                }
            ]
        })
    }, [meetingRoomUsedData])

    /* DOM结构书写区 */ 
    return (
        <div  className="statistic">
            <div className="statistic__form">
                <Form name='search'
                    form={form}
                    layout="inline"
                    colon={false}
                    onFinish={getStatisticData}>
                    <Form.Item label='开始日期' name='startTime'>
                        <DatePicker />
                    </Form.Item>
                    <Form.Item label='结束日期' name='endTime'>
                        <DatePicker />
                    </Form.Item>
                    <Form.Item label='图表类型' name='chartType' initialValue={'bar'}>
                        <Select style={{width: '120px'}}>
                            <Select.Option value='pie'>饼图</Select.Option>
                            <Select.Option value='bar'>柱形图</Select.Option>
                        </Select>
                    </Form.Item>

                    <Form.Item>
                        <Button type="primary" htmlType="submit">查询</Button>
                    </Form.Item>
                </Form>
            </div>
            <div className="statistic__chart" ref={chartRef}></div>
            <div className="statistic__chart" ref={chartRef2}></div>
        </div>
    )
}